<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('排课')"/>
    <th:block th:include="include :: fullcalendar-css"/>
    <th:block th:include="include :: tippy-css"/>
    <style>

        .fc-header-toolbar {
            /*
            the calendar will be butting up against the edges,
            but let's scoot in the header's buttons
            */
            padding-top: 1em;
            padding-left: 1em;
            padding-right: 1em;
        }

        .fc .fc-button {
            padding: 0 0.65em;
        }

    </style>
</head>
<body class="gray-bg" style="padding-top:20px;">
<div class="container-div">
    <div class="row">
        <div class="btn-group-sm" id="toolbar" role="group">
            <a id="btnAdd" class="btn btn-success">
                <i class="fa fa-plus"></i> 自由排课
            </a>
            <a id="btnAddRepeat" class="btn btn-primary">
                <i class="fa fa-plus"></i> 重复排课
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <div id='calendar-container'>
                <div id='calendar'></div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: fullcalendar-js"/>
<th:block th:include="include :: tippy-js"/>
<script th:inline="javascript">
    var prefix = ctx + "teaching/schedule";
    $(function () {
        $("#btnAdd").on("click", function () {
            $.modal.open("新建自由排课", prefix + "/add");
        });
        $("#btnAddRepeat").on("click", function () {
            $.modal.open("新建重复排课", prefix + "/addRepeat");
        });
    });

    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            themeSystem: 'standard',
            contentHeight: 600,
            locale: 'zh-cn',
            initialView: 'timeGridWeek',
            buttonIcons: true,
            editable: false,
            selectable: true,
            dayMaxEvents: true,
            eventOverlap: false,
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,listWeek'
            },
            eventClick: function (info) {
                var option = {
                    title: "修改排课",
                    url: prefix + "/edit/" + info.event.id,
                    btn: ['保存单次', '关闭窗口', '编辑重复', '删除单次'],
                    yes: function (index, layero) {
                        var iframeWin = layero.find('iframe')[0];
                        iframeWin.contentWindow.submitHandler(index, layero);
                        $.modal.close(index);
                        location.reload();
                    },
                    btn3: function (index, layero) {
                        var templateId = $.common.isEmpty(info.event.extendedProps.templateId) ? 0 : info.event.extendedProps.templateId;
                        if (templateId == 0) {
                            alert("非重复排课生成，无法编辑");
                            return false;
                        }
                        // var option = {
                        //     title: "重复排课",
                        //     url: prefix + "/editRepeat/" + templateId,
                        //     btn: ['保存', '关闭窗口', '删除模板', '删除单次'],
                        //     yes: function (index, layero) {
                        //         var iframeWin = layero.find('iframe')[0];
                        //         iframeWin.contentWindow.submitHandler(index, layero);
                        //         $.modal.close(index);
                        //         location.reload();
                        //     },
                        //     btn3: function (index, layero) {
                        //         var templateId = $.common.isEmpty(info.event.extendedProps.templateId) ? 0 : info.event.extendedProps.templateId;
                        //         if (templateId == 0) {
                        //             alert("非重复排课生成，无法编辑");
                        //             return false;
                        //         }
                        //         $.modal.open("重复排课", prefix + "/editRepeat/" + templateId);
                        //     },
                        //     btn4: function (index, layero) {
                        //         if (confirm("是否确认删除排课信息")) {
                        //             var url = ctx + "teaching/schedule/remove";
                        //             var data = {"ids": info.event.id};
                        //             $.operate.post(url, data, function () {
                        //                 location.reload();
                        //             })
                        //         }
                        //     }
                        // }
                        // $.modal.openOptions(option);
                        $.modal.open("重复排课", prefix + "/editRepeat/" + templateId);
                    },
                    btn4: function (index, layero) {
                        if (confirm("是否确认删除排课信息")) {
                            var url = ctx + "teaching/schedule/remove";
                            var data = {"ids": info.event.id};
                            $.operate.post(url, data, function () {
                                location.reload();
                            })
                        }
                    }
                }
                $.modal.openOptions(option);
            },
            eventContent: function (arg) {
                let italicEl = document.createElement('div')

                let html = "";
                html += arg.event.title;
                // html += "<br/>";
                // html += "开始:" + $.common.dateFormat(arg.event.start, "yyyy-MM-dd HH:mm");
                // html += "<br/>";
                // html += "结束:" + $.common.dateFormat(arg.event.end, "yyyy-MM-dd HH:mm");
                if (arg.event.extendedProps.teacherName) {
                    html += "<br/>";
                    html += "老师:" + arg.event.extendedProps.teacherName;
                }
                if (arg.event.extendedProps.teacherName) {
                    html += "<br/>";
                    html += "主题:" + arg.event.extendedProps.topic;
                }
                italicEl.innerHTML = html;
                let arrayOfDomNodes = [italicEl]
                return {domNodes: arrayOfDomNodes}
            },
            eventMouseEnter: function (arg) {
                let event = arg.event;

                tippy(arg.el, {
                    arrow: true,
                    placement: 'top',
                    // animation: 'fade',
                    theme: 'translucent',
                    content: "<div style='text-align: left;'>开始：" + $.common.dateFormat(event.start, "yyyy-MM-dd HH:mm") +
                        "<br/>结束：" + $.common.dateFormat(event.end, "yyyy-MM-dd HH:mm") +
                        "<br/>班课：" + event.title +
                        "<br/>老师：" + event.extendedProps.teacherName +
                        "<br/>主题：" + event.extendedProps.topic +
                        "</div>"
                    ,
                    allowHTML: true
                });
                // log.info(arg);
            },
            eventMouseLeave: function (arg) {
                // log.info(arg);
            }
        });

        let event = getEvents();
        calendar.addEventSource(event);
        calendar.render();
    });

    function getEvents() {
        var event = [];
        $.ajax({
            url: ctx + "teaching/schedule/list",
            method: "post",
            dataType: "json",
            async: false,
            success: function (res) {
                var data = res.rows;
                $.each(data, function (index, value) {
                    event.push({
                        id: value.scheduleId,
                        title: value.className,
                        start: $.common.dateFormat(value.startDate) + ' ' + value.startTime,
                        end: $.common.dateFormat(value.startDate) + ' ' + value.endTime,
                        backgroundColor: "rgb(52, 122, 183)",
                        borderColor: "rgb(31, 96, 153)",
                        description: "测试",
                        extendedProps: {
                            "teacherName": value.teacherName,
                            "topic": value.topic,
                            "templateId": value.templateId
                        }
                    })
                    // console.log(res);
                })
            }
        })
        return event;
    }
</script>
</body>
</html>
